import React, { Component } from 'react'
import "./GoodDetail.css"
import { Carousel, Toast } from 'antd-mobile';
// import myaxios from "../../utils/myaxios"

export default class GoodDetail extends Component {

  state = {
    data: ['1', '2', '3'],
    imgHeight: 176,
    score: [],  //  精彩评分
    totalData: [   //总数据
      {
        productName: '',
      }
    ],
    bannerImg: '', // banner图片
    obj: {},
    showCollect: false,  // 默认不收藏
  }


  componentDidMount() {
    document.title = '商品详情-当当触屏版'
    // let {product_id} = this.state.obj
    if (this.props.location.state !== undefined) {
      localStorage.setItem('goods_info', JSON.stringify(this.props.location.state.goods_info))
    }
    this.setState({
      obj: JSON.parse(localStorage.getItem('goods_info'))
    }, () => {
      // 初次进入商品详情的时候    判断商品是否被收藏
      let collections_str = localStorage.getItem("scList");
      let scList = JSON.parse(collections_str || "[]");
      // 对收藏进行循环遍历
      // 判断是否在收藏中
      let index = scList.findIndex(v => {
        return v.product_id === this.state.obj.id ? true : false
      })
      if (index !== -1) {
        this.setState({
          showCollect: true
        })
      }
      this.setState({
        totalData: [   //总数据
          {
            productName: this.state.obj.name,   //标题
            highPrice: this.state.obj.dd_sale_price || this.state.obj.price, //最高价
            lowPrice: this.state.obj.price,  //最低价
            author: '作者', //作者
            attrVal: this.state.obj.authorname || '神仙', // 作者名字
            press: '出版社', // 出版社
            pressFrom: this.state.obj.publisher || '神仙出版社',  //从出版社名字
            richTextTitle: '文章中心', //富文本标题
            richTextContent: this.state.obj.subname || '神仙的家', //富文本内容

          }
        ],
        bannerImg: this.state.obj.image_url
      })
    })
  }
  // 返回上一页
  handleBackClick = (params) => {
    window.history.go(-1)
  }
  //  跳转去首页
  handleShopClick = (params) => {
    this.props.history.push("/")
  }
  // 加入购物车
  handleAddCart = (params) => {
    // 首先从本地缓存中获取购物车的数据
    let carts = JSON.parse(localStorage.getItem("carts") || "[]")
    let goods_info = this.state.obj;
    carts.push(goods_info)
    goods_info.checked = false; // 加入购物车 给一个默认未选中
    goods_info.num = 1;
    Toast.info("加入购物车成功!", 1)
    localStorage.setItem("carts", JSON.stringify(carts))
  }
  // 立即购买
  handlePayNow = (params) => {
    this.props.history.push("/cart")
  }
  // 跳转去购物车
  handleCart = (params) => {
    this.props.history.push("/cart")
  }
  // 收藏宝贝
  handleCollection = (params) => {
    let collections_str = localStorage.getItem("scList")
    let scList = JSON.parse(collections_str || "[]");

    let index = scList.findIndex(v => {
      return v.id === this.state.obj.id ? true : false
    })
    if (index !== -1) {
      // 代表之前收藏过
      scList.splice(index, 1);
      Toast.info("取消收藏成功", 1);
      this.setState({
        showCollect: false
      })
    } else {
      Toast.info("收藏成功！", 1);
      scList.push(this.state.obj);
      this.setState({
        showCollect: true
      })
    }
    localStorage.setItem("scList", JSON.stringify(scList))

  }

  render() {
    return (
      <div className="dd-detail">
        {/* 头部nav开始 */}
        <div className="detail-nav">
          <i className="iconfont icon-fanhui" onClick={this.handleBackClick}></i>
          <ul className="nav">
            <li className="nav-item active"><span className="nav-title">商品</span></li>
            <li className="nav-item"><span className="nav-title">详情</span></li>
            <li className="nav-item"><span className="nav-title">评论</span></li>
            <li className="nav-item"><span className="nav-title">推荐</span></li>
          </ul>
          <i className="iconfont icon-19"></i>
        </div>
        {/* 头部nav结束 */}
        {/* 详情轮播开始 */}
        <div className="dd-swiper">
          <Carousel
            autoplay={true}
            infinite={true}
          >
            {this.state.data.map(val => (
              <div
                key={val}
                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
              >
                <img
                  src={this.state.bannerImg}
                  alt="暂无图片"
                  style={{ width: '100%', verticalAlign: 'top' }}
                  onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event('resize'));
                    this.setState({ imgHeight: 'auto' });
                  }}
                />
              </div>
            ))}
          </Carousel>
          {/* 免费在线读开始 */}
          <div className="read">
            <a href="http://e.dangdang.com/media/h5/webreader/index.html?channelId=30049&id=1901169634">免费在线读</a>
          </div>
          {/* 免费在线读结束 */}
        </div>
        {/* 详情轮播结束 */}
        {/* 列表详情开始 */}
        <div className="detail-content">
          {
            this.state.totalData && this.state.totalData.map((v, i) => {
              // console.log(v);
              return (
                <div className="content" key={i}>
                  {/* 标题开始 */}
                  <div className="detail-title">
                    <span className="dd-self">
                      <span>当当自营</span>
                    </span>
                    {v.productName}
                  </div>
                  {/* 标题开始 */}
                  {/* 简介开始 */}
                  <div className="detail-introduction">
                    {/* {v.introduction} */}
                  </div>
                  {/* 简介结束 */}
                  {/* 限时抢开始 */}
                  <div className="detail-special">
                    {/* {v.special} */}
                  </div>
                  {/* 限时抢结束 */}
                  {/* 价格栏开始 */}
                  <div className="detail-price">
                    <div className="price-left">
                      <span className="left-symbol">￥</span>
                      <div className="left-now">{v.highPrice}</div>
                      {/* <div className="left-discount">({v.priceInfo.discount}折)</div> */}
                    </div>
                    <div className="price-right">
                      <div className="right-ebookPrice">电子书￥{v.highPrice}</div>
                    </div>
                  </div>
                  {/* 价格栏结束 */}
                  {/* 定价栏开始 */}
                  <div className="detail-originalPrice">
                    <span className="original">定价</span>
                    <span className="originalPrice">￥{v.lowPrice}</span>
                  </div>
                  {/* 定价栏结束 */}
                  {/* 评论开始 */}
                  <div className="detail-comment">
                    <div className="comment-left">
                      <div className="left-star">
                        <span>10.0</span>
                        <div className="stars">★★★★★</div>
                      </div>
                      <div className="left-num">
                        <div className="bottom-num">172647人评分</div>
                        <div className="bottom-p">精彩评分送积分</div>
                      </div>
                    </div>
                    <div className="comment-right">
                      <div className="goToWrite">
                        <span>我要写评论</span>
                      </div>
                    </div>
                  </div>
                  {/* 评论结束 */}
                  {/* 促销开始 */}
                  <div className="detail-promotion">
                    <div className="promotion-left">
                      <span>促销</span>
                    </div>
                    <div className="promotion-right">
                      <div className="promotion-right-left">
                        <div className="promotion-right-top">
                          <div className="right-top-btn">
                            <span>加价购</span>
                          </div>
                          加7.40~30.00元换购热销商品
                        </div>
                        <div className="promotion-right-bottom">
                          <div className="right-bottom-btn">
                            <span>加价购</span>
                          </div>
                          加7.40~30.00元换购热销商品
                        </div>
                      </div>
                      <div className="right-icon">
                        <i className="iconfont icon-tubiao-"></i>
                      </div>
                    </div>
                  </div>
                  {/* 促销结束 */}
                  {/* 作者板块开始 */}
                  <div className="detail-linkTo">
                    <div className="linkTo-author">
                      <div className="author-left">
                        <div className="author">{v.author}</div>
                        <span>{v.attrVal}</span>
                      </div>
                      <div className="author-right">
                        <span>更多作品</span>
                        <i className="iconfont icon-tubiao-"></i>
                      </div>
                    </div>
                    <div className="linkTo-press">
                      <div className="press-left">
                        <div className="press">{v.press}</div>
                        <span>{v.pressFrom}</span>
                      </div>
                      <div className="press-right">
                        <span>更多作品</span>
                        <i className="iconfont icon-tubiao-"></i>
                      </div>
                    </div>
                  </div>
                  {/* 作者板块结束 */}
                  {/* 亮点展示开始 */}
                  <div className="detail-richText">
                    <div className="richText-title">{v.richTextTitle}</div>
                    <div className="richText-content" dangerouslySetInnerHTML={{ __html: v.richTextContent }}></div>
                    <img src={this.state.obj.image_url} alt="" />
                  </div>
                  {/* 亮点展示结束 */}
                </div>
              )
            })
          }
        </div>
        {/* 列表详情结束 */}
        {/* 底部按钮组开始 */}
        <div className="detail-bottom">
          <div className="contact-kefu" onClick={this.handleShopClick}>
            <i className="iconfont icon-icon_dianpu_12x"></i>
            <span>首页</span>
          </div>
          <div className="collection">
            <i className={this.state.showCollect ? "iconfont icon-iconkuozhan_shoucangpre" : "iconfont icon-shoucang"} onClick={this.handleCollection}></i>
            <span>收藏</span>
          </div>
          <div className="cart">
            <i className="iconfont icon-gouwuche3" onClick={this.handleCart}></i>
            <span>购物车</span>
          </div>
          <div className="addToCart" onClick={this.handlePayNow}>
            <span>立即购买</span>
          </div>
          <div className="buyNow" onClick={this.handleAddCart}>
            <span>加入购物车</span>
          </div>
        </div>
        {/* 底部按钮组结束 */}
      </div>
    )
  }
}
